<template>
  <div class="AbnormalOrders">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="活动编号" :label-col="{ span: 5}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input
                placeholder="请输入"
                v-decorator="[
          'activityNumber',
          {rules: [{ required: true, message: '请输入活动编号!' }]}
        ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="设备编号" :label-col="{ span: 5}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input
                placeholder="请输入"
                v-decorator="[
          'equipmentNumber',
          {rules: [{ required: true, message: '请输入设备编号!' }]}
        ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="7" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="findPageAbnormalOrderList()">查询</a-button>
            <a-button type="dashed" style="margin:0 2%" @click="listExport()">导出</a-button>
            <a-button @click="handleReset()">重置</a-button>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="异常类型" :label-col="{ span: 5 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-select
                v-decorator="[
          'exceptionTypes',
          {rules: [{ required: true, message: '请选择异常类型!' }]}
        ]"
                placeholder="全部"
              >
                <a-select-option value="1">全部</a-select-option>
                <a-select-option value="2">识别出未知商品</a-select-option>
                <a-select-option value="3">商品价格异常</a-select-option>
                <a-select-option value="4">未知商品与商品价格异常</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="创建时间" :label-col="{ span: 5 }" :wrapper-col="{ span: 16,offset:1 }">
              <a-range-picker
                style="width: 100%"
                v-decorator="['creationTime', rangeConfig]"
                show-time
                format="YYYY-MM-DD HH:mm:ss"
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="24">
            <p>规则说明：</p>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="24">
            <p style="font-size:13px;color:gray;">1.异常订单模块是有系统主动帮您进行异常订单甄别，帮你止损的模块</p>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="24">
            <p
              style="font-size:13px;color:gray;"
            >2.异常订单为系统发现订单中有未知商品等异常，暂时还未向用户进行扣费的订单，待您点击编辑按钮，按照操作流程处理完后，系统将从新进行处理扣费。</p>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="24">
            <p
              style="font-size:13px;color:gray;"
            >3.为了保证用户的体验，如果异常单 7 天未进行处理则系统将按照未知或未修改价格自动进行提交向用户扣费。</p>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card style="margin-top:2%">
      <a-badge count="24" :numberStyle="{backgroundColor: 'rgb(255,51,153)'} "></a-badge>
      <a-tabs defaultActiveKey="1" @change="callback">
        <a-tab-pane tab="待处理" key="1">
          <a-table
            :columns="columns"
            :dataSource="data"
            :pagination="pagination"
            @change="handleTableChange"
            :rowKey="record => record.id"
          >
            <template slot="serialNumber" slot-scope="text,record,index">
              <span>{{index+1}}</span>
            </template>
            <template slot="anomalousCause" slot-scope="text,record">
              <span>{{record.abnormalType==1?"识别出未知商品":'无'}}</span>
            </template>
            <template slot="status" slot-scope="text,record">
              <span>{{record.status==1?"待处理":record.status==2?"处理中":record.status==3?"处理完成":'无'}}</span>
            </template>
            <template slot="operation" slot-scope="text,record">
              <span class="blue" @click="detailsInfo(text, record)">详情</span>
              <span class="blue" @click="editModal(text,record)">编辑</span>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane tab="已处理" key="2" forceRender>
          <a-table
            :columns="columnsYet"
            :dataSource="dataYet"
            :pagination="paginationYet"
            @change="TableYet"
            :rowKey="record => record.id"
          >
            <template slot="serialNumber" slot-scope="text,record,index">
              <span>{{index+1}}</span>
            </template>
            <template slot="anomalousCause" slot-scope="text,record">
              <span>{{record.abnormalType==1?"识别出未知商品":'无'}}</span>
            </template>
            <template slot="status" slot-scope="text,record">
              <span>{{record.status==1?"待处理":record.status==2?"处理中":record.status==3?"处理完成":'无'}}</span>
            </template>
            <template slot="operation" slot-scope="text,record">
              <span class="blue" @click="detailsInfo(text, record)">详情</span>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-card>
    <a-modal
      title="异常订单处理流程"
      :visible="editVisible"
      @ok="editOk"
      @cancel="editCancel"
      :width="800"
      okText="提交"
    >
      <p>模板中的商品</p>
      <p>黑白盒子、红绿盒子、棕红盒子、康师傅红烧牛肉面160g、康师傅老坛酸菜牛肉面桶装82.5g、康师傅3+2苏打饼干蓝莓味125g、可口可乐红盖瓶装500ml、农夫山泉矿泉水550ml</p>
      <a-divider/>
      <p>未知商品处理流程</p>
      <a-steps direction="vertical" size="small" :current="0">
        <a-step>
          <template slot="title">第一步：查找订单中有哪些未知商品。</template>
        </a-step>
        <a-step>
          <template slot="title">第二步：查看“未知”商品是否在我的商品库中，如不在请进行添加。</template>
          <template slot="description">
            <router-link to="/home/goodsadmin/allgoods">
              <a-button>查看</a-button>
            </router-link>
          </template>
        </a-step>
        <a-step>
          <template slot="title">第三步：“未知”商品还在该设备继续售卖的话，请将“未知”商品添加到模板中。</template>
          <template slot="description">
            <a-button @click="addInfo()">添加</a-button>
          </template>
        </a-step>
        <a-step>
          <template slot="title">第四步：点击“提交”按钮，将订单提交至系统进行重新识别结算。</template>
        </a-step>
      </a-steps>
    </a-modal>
    <!-- <a-modal :visible="logisticsVisible" @ok="logisticsOk" @cancel="logisticsCancel" :width="800">
      <template slot="title">
        <div>
          <span>修改物流</span>
          <span style="color:red">*</span>
          <span>物流信息仅支持一次更正，请仔细填写并核对</span>
        </div>
      </template>
      <template slot="footer">
        <a-button key="back" @click="logisticsCancel">取消</a-button>
        <a-button class="save">保存</a-button>
        <a-button key="submit" type="primary" @click="logisticsOk">确定</a-button>
      </template>
      <a-table
        :columns="columnsLogistics"
        :dataSource="dataLogistics"
        :pagination="false"
        :rowKey="record => record.orderId"
      >
        <template slot="logisticsMode">
          <a-select defaultValue="物流发货" style="width: 120px" disabled>
            <a-select-option :value="0">物流发货</a-select-option>
          </a-select>
        </template>
        <template slot="logisticsCompany">
          <a-select defaultValue="顺风快递" style="width: 120px">
            <a-select-option :value="0">顺风快递</a-select-option>
          </a-select>
        </template>
        <template slot="trackingNumber">
          <a-input placeholder="请输入" value="129309203948290"/>
        </template>
      </a-table>
    </a-modal>-->
  </div>
</template>

<script>
const columns = [
  {
    title: "序号",
    dataIndex: "serialNumber",
    scopedSlots: { customRender: "serialNumber" },
    align: "center"
  },
  {
    title: "活动ID",
    dataIndex: "activityId",
    scopedSlots: { customRender: "activityId" },
    align: "center"
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    scopedSlots: { customRender: "creationTime" },
    align: "center"
  },
  {
    title: "设备编号",
    dataIndex: "devCode",
    scopedSlots: { customRender: "facilityNumber" },
    align: "center"
  },
  {
    title: "所属商家",
    dataIndex: "agentName",
    scopedSlots: { customRender: "agent" },
    align: "center"
  },
  {
    title: "异常原因",
    dataIndex: "abnormalType",
    scopedSlots: { customRender: "anomalousCause" },
    align: "center"
  },
  {
    title: "订单编号",
    dataIndex: "orderCode",
    scopedSlots: { customRender: "orderNumber" },
    align: "center"
  },
  {
    title: "状态",
    dataIndex: "debugStatus",
    scopedSlots: { customRender: "status" },
    align: "center"
  },
  {
    title: "是否超时",
    dataIndex: "isOvertime",
    scopedSlots: { customRender: "isOvertime" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "",
    scopedSlots: { customRender: "operation" },
    align: "center"
  }
];

const columnsYet = [
  {
    title: "序号",
    dataIndex: "serialNumber",
    scopedSlots: { customRender: "serialNumber" },
    align: "center"
  },
  {
    title: "活动ID",
    dataIndex: "activityId",
    scopedSlots: { customRender: "activityId" },
    align: "center"
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    scopedSlots: { customRender: "creationTime" },
    align: "center"
  },
  {
    title: "设备编号",
    dataIndex: "devCode",
    scopedSlots: { customRender: "facilityNumber" },
    align: "center"
  },
  {
    title: "所属商家",
    dataIndex: "agentName",
    scopedSlots: { customRender: "agent" },
    align: "center"
  },
  {
    title: "异常原因",
    dataIndex: "abnormalType",
    scopedSlots: { customRender: "anomalousCause" },
    align: "center"
  },
  {
    title: "订单编号",
    dataIndex: "orderCode",
    scopedSlots: { customRender: "orderNumber" },
    align: "center"
  },
  {
    title: "状态",
    dataIndex: "debugStatus",
    scopedSlots: { customRender: "status" },
    align: "center"
  },
  {
    title: "是否超时",
    dataIndex: "isOvertime",
    scopedSlots: { customRender: "isOvertime" },
    align: "center"
  },
  {
    title: "操作",
    dataIndex: "",
    scopedSlots: { customRender: "operation" },
    align: "center"
  }
];

const columnsLogistics = [
  {
    title: "包裹",
    dataIndex: "parcel",
    scopedSlots: { customRender: "parcel" },
    align: "center"
  },
  {
    title: "商品数/数量",
    dataIndex: "goodsNumber",
    scopedSlots: { customRender: "goodsNumber" },
    align: "center"
  },
  {
    title: "物流方式",
    dataIndex: "logisticsMode",
    scopedSlots: { customRender: "logisticsMode" },
    align: "center"
  },
  {
    title: "物流公司",
    dataIndex: "logisticsCompany",
    scopedSlots: { customRender: "logisticsCompany" },
    align: "center"
  },
  {
    title: "物流单号",
    dataIndex: "trackingNumber",
    scopedSlots: { customRender: "trackingNumber" },
    align: "center"
  }
];
const data = [
  {
    key: "1"
  }
];

const dataYet = [
  {
    key: "1"
  }
];

const dataLogistics = [
  {
    key: 1
  }
];
export default {
  name: "AbnormalOrders",
  data() {
    return {
      form: this.$form.createForm(this),
      rangeConfig: {
        rules: [
          { type: "array", required: true, message: "Please select time!" }
        ]
      },
      data: [],
      columns,
      pagination: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["2", "4", "8", "10", "12"],
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        },
        pageSize: 2,
        defaultCurrent: 1,
        current: 1,
        total: 5
      },
      paginationYet: {
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ["2", "4", "8", "10", "12"],
        showTotal: (total, range) => {
          return `${range[0]}-${range[1]} 共${total}条`;
        },
        pageSize: 2,
        defaultCurrent: 1,
        current: 1,
        total: 5
      },
      visible: false,
      editVisible: false,
      // logisticsVisible: false,
      columnsLogistics,
      dataLogistics,
      columnsYet,
      dataYet: []
    };
  },
  watch: {},
  computed: {},
  methods: {
    //重置方法
    handleReset() {
      this.form.resetFields();
    },
    callback(key) {
      console.log(key);
      if (key == 1) {
        this.findPageAbnormalOrderList();
      }
      if (key == 2) {
        this.processedOrderList();
      }
    },
    handleTableChange(pagination, filters, sorter) {
      const pager = { ...this.pagination };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.pagination = pager;
      this.findPageAbnormalOrderList();
    },
    TableYet(pagination, filters, sorter) {
      const pager = { ...this.paginationYet };
      pager.current = pagination.current;
      pager.pageSize = pagination.pageSize;
      pager.total = pagination.total;
      this.paginationYet = pager;
      this.processedOrderList();
    },
    editModal(text, record) {
      this.editVisible = true;
      this.orderId = record.id;
    },
    editOk(e) {
      this.editVisible = false;
      this.handleAbnormalOrder();
    },
    editCancel(e) {
      this.editVisible = false;
    },

    // logisticsModal() {
    //   this.logisticsVisible = true;
    // },
    // logisticsOk(e) {
    //   this.logisticsVisible = false;
    // },
    // logisticsCancel(e) {
    //   this.logisticsVisible = false;
    // },

    // 跳对应的模板
    addInfo() {
      this.$store.commit("goodsTemplateId", this.goodsTemplateId);
      this.$router.push({
        path: "/home/goodsadmin/templateadmin/templateedit"
      });
    },

    // 点击详情跳页传值
    detailsInfo(text, record) {
      var orderId = record.id;
      this.$store.commit("orderId", orderId);
      this.$router.push({
        path: "/home/orderadmin/abnormalorders/abnormaldetails"
      });
    },

    // 异常订单列表--待处理
    findPageAbnormalOrderList() {
      var values = this.form.getFieldsValue();
      if (values.creationTime == undefined) {
        values.creationTime == undefined;
      } else {
        this.startTime = moment(values.creationTime[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endTime = moment(values.creationTime[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios
        .post(this.baseUrl + "/order/findPageAbnormalOrderList", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.pagination.current,
          pageSize: this.pagination.pageSize,
          // debugStatus: values.exceptionTypes,
          endTime: this.endTime,
          startTime: this.startTime
        })
        .then(response => {
          // console.log(response);
          this.data = response.data.data.list;
          this.pagination.total = response.data.data.total;
          this.pagination.pageSize = response.data.data.pageSize;
          this.pagination.current = response.data.data.pageNum;
        });
    },

    // 异常订单列表--已处理
    processedOrderList() {
      var values = this.form.getFieldsValue();
      if (values.creationTime == undefined) {
        values.creationTime == undefined;
      } else {
        this.startTime = moment(values.creationTime[0]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        this.endTime = moment(values.creationTime[1]._d).format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
      this.axios
        .post(this.baseUrl + "/order/findPageAbnormalOrderList", {
          loginToken: this.$store.state.loginToken,
          pageNum: this.paginationYet.current,
          pageSize: this.paginationYet.pageSize,
          // debugStatus: values.exceptionTypes,
          endTime: this.endTime,
          startTime: this.startTime
        })
        .then(response => {
          console.log(response);
          this.dataYet = response.data.data.list;
          this.paginationYet.total = response.data.data.total;
          this.paginationYet.pageSize = response.data.data.pageSize;
          this.paginationYet.current = response.data.data.pageNum;
        });
    },

    // 代理商库存导出
    listExport() {
      var values = this.form.getFieldsValue();
      this.axios
        .post(
          this.baseUrl + "/order/exportAbnormalOrder",
          {
            loginToken: this.$store.state.loginToken,
            // debugStatus: values.exceptionTypes,
            endTime: this.endTime,
            startTime: this.startTime
          },
          { responseType: "arraybuffer" }
        )
        .then(response => {
          // console.log(response);
          if (response.status == "200") {
            const aLink = document.createElement("a");
            let blob = new Blob([response.data], {
              type: "application/vnd.ms-excel"
            });
            aLink.href = URL.createObjectURL(blob);
            aLink.download = "异常订单表";
            aLink.click();
            document.body.appendChild(aLink);
          }
        });
    },

    // 处理异常订单
    handleAbnormalOrder(goodsReturnId) {
      var values = this.form.getFieldsValue();
      this.axios({
        method: "post",
        url: this.baseUrl + "/order/handleAbnormalOrder",
        data: {
          loginToken: this.$store.state.loginToken,
          orderId: this.orderId,
          authorType: 2
        }
      }).then(res => {
        // console.log(res);
        if (res.data.code == 0) {
          this.$message.info("处理订单成功");
          this.findPageAbnormalOrderList();
        }
      });
    }
  },
  created() {
    this.findPageAbnormalOrderList();
  },
  mounted() {}
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.AbnormalOrders {
  width: 100%;
}
</style>
